<template>
	<view>
		<!-- <view v-if="loading">
			<loading></loading>
		</view> -->
		<view  class="container">
			<view class="exam-report">
				<text class="title"> 测评报告</text>
				<view class="report-view">
					<view class="desc" v-if="detailData">
						<view class="detail" @click="toExamLog"><image src="/static/images/all.png"></image><text>累计测评</text><text class="count">{{detailData.examCount}}次</text></view>
						<view class="detail"  @click="toPassLog"><image src="/static/images/qualified.png"></image><text>合格次数</text><text class="count">{{detailData.passCount}}次</text></view>
						<view class="detail"  @click="toWrongLog"><image src="/static/images/error.png"></image><text>错题记录</text><text class="count">{{detailData.errorSubjectNum}}道</text></view>
						<view class="detail"  @click="toMax"><image src="/static/images/top.png"></image><text>正式考试最高分</text><text class="count">{{detailData.scoreMax}}分</text></view>
					</view>
					<view class="report">
						<echarts ref="echarts" :option="option" canvasId="echarts"></echarts>
						<view class="bottom"  v-if="detailData">
							<view><text  class="wenzi">考试合格率</text><text class="count">{{Number( this.detailData.passRate * 100).toFixed()}}%</text></view>
							<view><text  class="wenzi">击败了平台</text><text class="count">{{Number( this.detailData.rankRate * 100).toFixed()}}%</text><text  class="wenzi">的用户</text></view>
						</view>
					</view>
				</view>
			</view>
			<view class="course-report">
				<text class="title"> 课程报告</text>
				<view class="desc" v-if="detailData">
					<view class="detail"><image src="/static/images/watch.png"></image><text>课程累计观看</text><text class="count">{{Number( this.detailData.studyTimeCount/60000).toFixed()}}分钟</text></view>
					<view class="detail"><image src="/static/images/today.png"></image><text>今日观看</text><text class="count">{{this.detailData.todayStudyTime == null ? '0':Number( this.detailData.todayStudyTime /60000).toFixed()}}分钟</text></view>
				</view>
				<view class="report">
					<echarts ref="echarts" :option="option2" canvasId="echarts2"></echarts>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import echarts from '@/components/echarts-uniapp/echarts-uniapp.vue';
	import {getStudentExamCount} from '@/api/exam/exam';
	import loading from '@/components/loading/loading'
	
	export default {
			data() {
				return {
					option: {},
					option2: {},
					detailData:null,
					loading:true
				}
			},
			// 注册组件
			components: {
				echarts,
				loading
			},
			created() {
				this.getStudent()
			},

			methods: {
				clickDetail(e) {
					this.$tab.navigateTo('/pages/work/datacenter/classDetail?id=' + e.id)
				},
				getStudent(){
					let data = {
						studentId:uni.getStorageSync('studentId'),
					}
					getStudentExamCount(data).then(res =>{
						if(res.data !=null){
							this.detailData = res.data
							if(this.detailData.todayStudyTime == null){
								this.detailData.todayStudyTime = 0
							}
							let rate = []
							for (let i = 0; i < this.detailData.categoryRate.length; i++) {
								rate.push({value:parseInt(this.detailData.categoryRate[i].categoryRate),name:this.detailData.categoryRate[i].categoryName})
							}
							this.option={
								title: {
									text: Number( this.detailData.passRate * 100).toFixed() + '%',
									textStyle: {
										fontSize: 20,
										fontStyle: 'normal',
									},
									left: 'center',
									top: '20%',
								},
								angleAxis: {
									max: 100, // 满分
									clockwise: false, // 逆时针
								    // 隐藏刻度线
									axisLine: {
										show: false
									},
									axisTick: {
										show: false
									},
									axisLabel: {
										show: false
									},
									splitLine: {
										show: false
									}
								},
								radiusAxis: {
									type: 'category',
								    // 隐藏刻度线
									axisLine: {
										show: false
								  },
								  axisTick: {
										show: false
								  },
								  axisLabel: {
										show: false
								  },
								  splitLine: {
										show: false
								  }
								},
								polar: {
									center: ['50%', '30%'],
									radius: '100%' //图形大小
								},
								series: [{
									type: 'bar',
								    data: [{
										name: '合格次数',
										value:Number( this.detailData.passRate * 100).toFixed(1),
										itemStyle: {
											normal: {
												color: '#508CFF'
											}
										},
								    }],
									coordinateSystem: 'polar',
									roundCap: true,
									barWidth: 7,
									barGap: '-100%', // 两环重叠
									z: 2,
								},{ // 灰色环
								    type: 'bar',
								    data: [{
										value: 100,
										itemStyle: {
											color: '#e2e2e2',
										}
									}],
									coordinateSystem: 'polar',
									roundCap: true,
									barWidth: 7,
									barGap: '-100%', // 两环重叠
									z: 1
								}]
							}
							this.option2 = {
								title:{
									text:"课程类目分布图",
									subtext: '',
									left:"center",
									top:"0",
									textStyle: {
										fontSize: 12,
										fontStyle: 'normal',
										fontWeight: 'normal',
										fontColor:'#5E5E5E;'
									},
								},
								legend: {
								    orient: 'horizontal', 
								    align: 'left', //图例小图标在图例文字的哪个方向，这里设置为左侧
										icon:'rect',
										itemWidth:12,
										itemHeight:12,
										bottom:'0',
								    left:'center',
										itemGap: 10,
								    bottom: '20%',
								    textStyle: {
								      color: '#999',
								      fontSize: 10,
								    },
								},
								series: [{
									name: '课程类目分布图',
									type: 'pie',
									radius: ['35%','58%'],
									center: ['50%', '40%'],
									color:[ '#EF4444','#3B82F6','#22C55E','#EAB308','#F97316'], //设置对应块的数据
									label: {
										show: true,
										color: '#fff',
										position: 'inside',  //center
										formatter: '{@[1]}%',
										//formatter: '{@2014}',
										fontSize : '10'
									},
									labelLine: {
										normal: {
											show: false
										}
									},
									data: rate,
								}],
							}
						}else{
							
						}
					})
				},
				toExamLog(){
					this.$tab.navigateTo('/pages/exam/examinationLog?type=0')
				},
				toPassLog(){
					this.$tab.navigateTo('/pages/exam/passLog')
				},
				toWrongLog(){
					this.$tab.navigateTo('/pages/exam/wrongLog')
				},
				toMax(){
					this.$tab.navigateTo('/pages/exam/detail?id=' + this.detailData.examRecordId )
				}
			}
		}
	</script>

<style lang="scss">
	.container{
		.title{
			font-size: 12px;
			font-family: Inter-Bold, Inter;
			font-weight: bold;
			padding-left: 12px;
		}
		.exam-report{
			width: 700rpx;
			margin: 20rpx auto;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-top: 20rpx;
			.report-view{
				display: flex;
				padding-bottom: 10px;
				justify-content: space-between;
				.report{
					width: 320rpx;
					height: 300rpx;
					.bottom{
						position: relative;
						top: -110rpx;
						text-align: center;
						
						color: #5E5E5E;
						font-family: Inter-Regular, Inter;
						.wenzi{
							font-size: 10px;
						}
						.count{
							color: #FF9A50 ;
							font-family: Inter-Bold, Inter;
							font-weight: bold;
							padding:3px;
							font-size: 14px;
							line-height: 50rpx;
						}
					}
				}
			}
		}
		.desc{
			line-height: 20px;
			margin-top: 15px;
			color: #5E5E5E;
			.detail{
				display: flex;
				justify-items: center;
				padding: 0px 10px;
				margin: 0 0 16px 0;
				font-size: 12px;
				font-family: Inter-Light, Inter;
				
			}
			image{
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
			.count{
				color: #FF9A50 ;
				padding-left: 3px;
			}
		}
		.course-report{
			width: 700rpx;
			margin: 20rpx auto;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding-top: 20rpx;
			.report{
				margin-top: 15px;
				width: 100%;
				height: 700rpx;
			}
		}
	}
</style>